<template>
  <!-- 双括号语法 -->
  <h1>{{ msg }}</h1>
  <!-- v-once 是内容只渲染一次  -->
  <h1 @click="changeMsg" v-once>{{ msg }}</h1>
  <h1 v-on:click="changeMsg" v-once>{{ msg }}</h1>
  <!-- v-html 插入标签内容 -->
  <div>{{ content }}</div>
  <div v-html="content"></div>
  <!--  v-bind 绑定指令 绑定属性内容-->
  <div :id="id" :class="id"></div>
  <div v-bind:id="id" v-bind:class="id"></div>

</template>

<script>
// 声明式
export default {
  name: 'App',
  data() {
    return {
      msg: 'helloworld',
      content: '<h1>标题1</h1><h2>标题2</h2>',
      id:'d1'
    }
  },
  // 方法
  methods: {
    changeMsg() {
      this.msg = 'helloworld'
      this.id = 'd2'
    }
  }
}
</script>

<style>
#d1{
  width: 100px;
  height: 100px;
  background-color: red;
}
#d2{
  width: 100px;
  height: 100px;
  background-color: blue;
}
</style>